<template>
  <div>

    <van-row class="file-community" style="margin-bottom: 50px">
      <van-col span="24">
        <van-nav-bar
            title="我的档案"
            :safe-area-inset-top="true"
            :fixed="true"
            @click-left="onClickLeft"
        />
      </van-col>

      <van-col class="file-community-con">
        <van-dropdown-menu>
          <van-dropdown-item v-model="community" :options="communityS" />
        </van-dropdown-menu>
      </van-col>
    </van-row>

    <!-- 按事件 -->
    <van-row class="file-bg">
      <van-col span="24" class="file-ec">
        <template style="padding-bottom: 10px">
          <van-tabbar v-model="activeDate" class="file-time-list" >
            <van-tabbar-item name="day" @click="clickcc('日')">日</van-tabbar-item>
            <van-tabbar-item name="week" @click="clickcc('周')">周</van-tabbar-item>
            <van-tabbar-item name="month" @click="clickcc('月')">月</van-tabbar-item>
            <van-tabbar-item name="year" @click="clickcc('年')">年</van-tabbar-item>
          </van-tabbar>
        </template>

        <van-tabs v-model="activeName" @click="clickcc(this.text)">
          <van-tab title="按事件">

            <van-row class="backg">
              <van-col span="24" class="backg-c">
                <van-col span="8">
                  <div class="count">
                    <div class="font-18">{{ ri_pend }}</div>
                    <div class="count-line count-line-ac"></div>
                    <div class="font-12 count-line-text">待处理</div>
                  </div>
                </van-col>

                <van-col span="8">
                  <div class="count">
                    <div class="font-18">{{ ri_over }}</div>
                    <div class="count-line count-line-ac"></div>
                    <div class="font-12 count-line-text">已逾期</div>
                  </div>
                </van-col>

                <van-col span="8">
                  <div class="count">
                    <div class="font-18">{{ ri_completed }}</div>
                    <div class="count-line count-line-ac"></div>
                    <div class="font-12 count-line-text">已完成</div>
                  </div>
                </van-col>
              </van-col>
            </van-row>

            <van-row class="backg bottom-mt">

              <van-col span="24" class="backg-c">

                <ve-pie :data="chartData"></ve-pie>

                <van-row class="tabble-title">
                  <van-col span="14" class="font-18">
                    事件类型
                  </van-col>
                  <van-col span="6" class="font-18 font-textCenter">
                    数量
                  </van-col>
                  <van-col span="4" class="font-18 font-textCenter">
                    占比
                  </van-col>
                </van-row>

                <van-row class="tabble-con"  v-for="(item , index) in list" :key="index" :lable="item.label" :value="item.value">
                  <van-col span="14" class="font-12">
                    <span class="round round-green" ></span>{{ item.eventTypeName }}
                  </van-col>
                  <van-col span="6" class="font-12 font-textCenter">
                    {{ item.eventCount }}
                  </van-col>
                  <van-col span="4" class="font-12 font-textCenter">
                    100%
                  </van-col>
                </van-row>

              </van-col>
            </van-row>

          </van-tab>

          <!-- 按人员 -->
          <van-tab  title="按人员">

            <van-row class="backg">
              <van-col span="24" class="backg-c">
                <van-col span="8">
                  <div class="count">
                    <div class="font-18">{{ ri_pend }}</div>
                    <div class="count-line count-line-ac"></div>
                    <div class="font-12 count-line-text">待处理</div>
                  </div>
                </van-col>

                <van-col span="8">
                  <div class="count">
                    <div class="font-18">{{ ri_over }}</div>
                    <div class="count-line count-line-ac"></div>
                    <div class="font-12 count-line-text">已逾期</div>
                  </div>
                </van-col>

                <van-col span="8">
                  <div class="count">
                    <div class="font-18">{{ ri_completed }}</div>
                    <div class="count-line count-line-ac"></div>
                    <div class="font-12 count-line-text">已完成</div>
                  </div>
                </van-col>
              </van-col>
            </van-row>

            <van-row class="backg bottom-mt">
              <van-col span="24" class="backg-c">
                <ve-bar :data="chartStrip" :settings="stripSettings"></ve-bar>

                <van-row class="tabble-title">
                  <van-col span="8" class="font-18">
                    姓名
                  </van-col>
                  <van-col span="8" class="font-18 font-textCenter">
                    待处理数
                  </van-col>
                  <van-col span="8" class="font-18 font-textCenter">
                    已逾期数
                  </van-col>
                </van-row>

                <van-row class="tabble-con">
                  <van-col span="8" class="font-12">
                    {{username}}
                  </van-col>
                  <van-col span="8" class="font-12 font-textCenter">
                    {{daichu}}
                  </van-col>
                  <van-col span="8" class="font-12 font-textCenter">
                    {{yuqi}}
                  </van-col>
                </van-row>

              </van-col>
            </van-row>

          </van-tab>
        </van-tabs>
      </van-col>
    </van-row>



    <Nav />

  </div>

</template>

<script>
import Nav from "@/components/Nav.vue";
import {Toast} from "vant";
export default {
  components:{
    Nav,

  },
  created() {
    this.clickcc("日");

  },
  methods: {
    onClickLeft(){
      this.$router.go(-1);
    },
    clickcc(text){
      console.log("我的档案选择事件周期");
      console.log(text);
      this.dateC=text;
      if (this.dateC==""){
        this.dateC="日";
      }
      this.texts=this.activeName;
      console.log(this.dateC);
      var userid= localStorage.getItem("userId")
      this.username=localStorage.getItem("userName");

      if (localStorage.getItem("userType")=="社工"){
        this.your=false;
      }
      // if (res.data.msg=="暂无数据"){
      //   Toast("当前无数据");
      //   this.chartData.rows[0].事件名称="";
      //   this.chartData.rows[0].违规数比="";
      //   this.list=null;
      // }

      if (localStorage.getItem("userType")=="00"||localStorage.getItem("userType")=="20"){
        console.log("我是管理员");
        this.$http.post('http://139.224.226.216:8083/appAdminPersonnel/adminPersonnel?userId='+userid+'&date='+text)
            .then(res=>{
              console.log("社工登陆查看所有人员信息");
              console.log(res);
              if (res.data.msg=="暂无数据"){
                Toast("当前无数据");
                this.chartStrip.rows[0].姓名="";
                this.chartStrip.rows[0].待处理数量=0;
                this.chartStrip.rows[0].已逾期数量=0;
                this.yuqi=0;
                this.daichu=0;
                this.yiwan=0;
                this.username=localStorage.getItem("userName");
              }
              console.log("档案res的值");
              console.log(res);
              this.ri_pend =res.data.data.pendCount;
              this.chartStrip.rows[0].姓名=localStorage.getItem("userName");
              this.chartStrip.rows[0].待处理数量=res.data.data.pendCount;
              this.chartStrip.rows[0].已逾期数量=res.data.data.overCount;
              this.yuqi=res.data.data.overCount;
              this.daichu=res.data.data.pendCount;
              this.yiwan=res.data.data.completedCount;
              this.list=res.data.data.list;

            })

      }else if (localStorage.getItem("userType")=="30"){
        console.log("我是执法人员");
      }else if (localStorage.getItem("userType")=="网格员"){
        if (this.activeName==1){
          this.$http.post('http://139.224.226.216:8083/appArchives/appArchivesCount?userId='+userid+'&date='+text)
              .then(res=>{
                console.log("我是网格员操作人员");
                console.log("人员res的值");
                console.log(res);
                this.list=res.data.data.list;
                this.ri_pend =res.data.data.pendCount;
                this.chartStrip.rows[0].姓名=localStorage.getItem("userName");
                this.chartStrip.rows[0].待处理数量=res.data.data.pendCount;
                this.chartStrip.rows[0].已逾期数量=res.data.data.overCount;
                console.log("人员res的值2");
                console.log(  this.chartStrip.rows[0]);
                this.yuqi=res.data.data.overCount;
                this.daichu=res.data.data.pendCount;
                this.username=localStorage.getItem("userName");
              })
        }else{
          this.$http.post('http://139.224.226.216:8083/appArchives/appArchivesCount?userId='+userid+'&date='+text)
              .then(res=>{
                console.log("我是网格员操作事件");
                console.log(localStorage.getItem("userType"));
                console.log("当前按事件");
                console.log(this.texts);
                console.log("事件res的值");
                console.log(res);
                this.list=res.data.data.list;
                if (res.data.data.pendCount!=null){
                  this.ri_pend =res.data.data.pendCount;
                }
                if (res.data.data.overCount!=null){
                  this.ri_over=res.data.data.overCount;
                }
                if (res.data.data.completedcount!=null){
                  this.ri_completed=res.data.data.completedcount;
                }

                for (var i=0;i<res.data.data.list.length;i++){
                  if (res.data.data.list[i].eventCount==null){
                    res.data.data.list[i].eventCount=0;
                  }
                  this.chartData.rows[i].事件名称=res.data.data.list[i].eventTypeName;
                  this.chartData.rows[i].违规数比=res.data.data.list[i].eventCount
                }

                console.log("当前的值~")
                console.log(this.chartData.rows)
                for (var j=0; j<this.chartData.rows.length;j++){
                  if (this.chartData.rows[j].违规数比==0){
                    this.chartData.rows[j].违规数比=10;
                  }else{
                    this.chartData.rows[j].违规数比=this.chartData.rows[j].违规数比*20;
                  }
                }
              })
        }
      }


    },

    tabslist(text){
      console.log("table切换");
      console.log(text);
      console.log(localStorage.getItem("userType"));
      this.texts=text;
      this.clickcc(this.dateC);
    }
  },


  data() {
    this.stripSettings =  {
      stack: {
        'xxx': ['待处理数量', '已逾期数量']
      }
    }
    return {
      activeDate:'day',
      area: 0,
      active:0,
      activeTime: 0,
      activeName:0,
      message:'',
      community:0,
      yuqi:0,
      your:true,
      texts:0,
      dateC:'',
      daichu:0,
      yiwan:0,
      list:[
        {
          "eventTypeName":"123",
          "eventCount":0
        }
      ],
      ri_completed:0,
      ri_pend:0,
      ri_over:0,
      fileTime:'日',
      communityS: [
        { text: '全部社区', value: 0 },
        { text: '宾王社区', value: 1 },
        { text: '某某社区', value: 2 },
        { text: '不知道社区', value: 3 },
      ],
      fileTimeS:[
        { text: '日', value: '日' },
        { text: '周', value: '周' },
        { text: '月', value: '月' },
        { text: '年', value: '年' },
      ],
      areaCon: [
        { text: '小区名称', value: 0 },
        { text: '商超名称', value: 1 },
        { text: '写字楼名称', value: 2 },
      ],
      chartSettings: {
        label: {
          show:true
        },
      },

      chartData: {
        columns: ['事件名称', '违规数比'],
        rows: [
          { '事件名称': '', '违规数比': 0 },
          { '事件名称': '', '违规数比': 0 },
          { '事件名称': '', '违规数比': 0 },
          { '事件名称': '', '违规数比': 0 },
          { '事件名称': '', '违规数比': 0 },
          { '事件名称': '', '违规数比': 0 },
          { '事件名称': '', '违规数比': 0 },
        ],
      },
      chartStrip: {
        columns: ['姓名', '待处理数量', '已逾期数量'],
        rows: [
          { '姓名': '', '待处理数量':0, '已逾期数量': 0},
        ]
      }
    };
  },

};
</script>

<style scoped>
.count{
  text-align: center;
  margin: 15px 0;
}
.count-iconbg{
  width: 46px;
  height: 46px;
  border-radius:23px;
  margin: 0 auto;
  position: relative;
}
.count-bg1{
  background-color: rgba(88,132,245,0.1);
}
.count-bg2{
  background-color: rgba(243,41,41,0.1);
}
.count-bg3{
  background-color: rgba(59,180,0,0.1);
}
.count-img{

}
.count-column{
  position: absolute;
  right: -15px;
  top: -10px;
  background-image: url("../assets/img/warn-icon.png");
  background-size: 100% 100%;
  width: 20px;
  height: 21px;
  text-align: center;
  line-height: 20px;
  font-size: 10px;
  color: #fff;
}
.count-line{
  width: 18px;
  height: 1px;
  margin: 5px auto;
  background-color: #e2e2e2;
}


.file-community{
  position: relative;
}


.file-community-con{
  position: absolute;
  font-size: 12px;
  color: #fff;
  right: 20px;
  z-index: 1;
  top: -2px;
}

.fileTime{
  position: absolute;
  font-size: 12px;
  color: #666;
  right: 0;
  z-index: 1;
}

.file-bg{
  position: relative;
  background-color: #f0f3f8;
}
.file-con{
  position: absolute;
  left: 0;
  padding: 10px;
  top: 10px;
}
.time-text{
  font-size:18px;
  color: #fff;
  text-align: center;
  padding-top: 40px;
}
.time-text span{
  font-size: 30px;
}

.tabble-title{
  color: #333;
  border-top: 1px solid #e2e2e2;
  padding-top: 10px;
}
.tabble-con{
  padding: 5px 8px;
  border-radius: 5px;
}
.tabble-con .font-12{
  color: #666;
}
.tabble-con:hover{
  background-color: #f0f3f8;
}
.img-margin{
  margin: 0 !important;
}
.file-time-list{
  position: absolute;
  right: 40px;
  top: 15px;
  z-index: 2;
  font-size: 12px;
  color: #666;
}
</style>